<template>
  <div class="statistics-allCard" v-loading="loading">
    <div>
      <div class="heard-title"
        ><el-icon class="icon"><DataAnalysis /></el-icon>数据总览</div
      >
      <el-divider style="margin: 10px 0" />
    </div>
    <el-row :gutter="20" class="main-cards">
      <el-col :span="6" v-for="(item, index) in statisticsInfo" :key="item?.title">
        <div class="statistics-card">
          <div class="statistics-icon">
            <svg-icon :icon-class="item.icon" class="icons" />
          </div>
          <div class="statistics-right">
            <div class="statistics-item">
              {{ item?.title }}
            </div>
            <div class="statistics-number">
              <count-to
                :start-val="0"
                :end-val="item.number"
                :duration="2000"
                :decimals="item.decimals"
                :autoplay="true"
              ></count-to>
              <span class="number-span">{{ item.unit }}</span>
            </div>
            <div class="statistics-item">
              {{ item?.info }}
              {{ index === 0 ? item.infoNumber?.toLocaleString() : numberFormat(item?.infoNumber) }}
              <span class="item-span">{{ item.unit }}</span>
            </div>
            <div class="statistics-item">
              {{ item?.moreInfo }}
              {{
                index === 0
                  ? item?.moreInfoNumber?.toLocaleString()
                  : numberFormat(item?.moreInfoNumber)
              }}
              <span class="item-span">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import CountTo from '@/components/CountTo/index.vue'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { getDashboardBaseData } from '@/api/controller/charging-controller'
  const loading = ref(true)
  const statisticsInfo = ref<any>([])
  onMounted(async () => {
    initializeApp(
      getDashboardBaseData().then((res) => {
        statisticsInfo.value = [
          {
            title: '站点数：',
            number: res.data.siteNumber,
            info: '小区数：',
            infoNumber: res.data.communityNumber,
            moreInfo: '点位数：',
            moreInfoNumber: res.data.pointNumber,
            decimals: 0,
            icon: 'siteNum',
            unit: '个',
          },
          {
            title: '最近一月收入：',
            number: res.data.monthIncome,
            info: '最近一月支出：',
            infoNumber: res.data.monthSpend,
            moreInfo: '最近一月毛利：',
            moreInfoNumber: res.data.monthGrossProfit,
            decimals: 2,
            icon: 'income',
            unit: '元',
          },
          {
            title: '最近一季收入：',
            number: res.data.quarterIncome,
            info: '最近一季支出：',
            infoNumber: res.data.quarterSpend,
            moreInfo: '最近一季毛利：',
            moreInfoNumber: res.data.quarterGrossProfit,
            decimals: 2,
            icon: 'income',
            unit: '元',
          },
          {
            title: '最近一年收入：',
            number: res.data.yearIncome,
            info: '最近一年支出：',
            infoNumber: res.data.yearSpend,
            moreInfo: '最近一年毛利：',
            moreInfoNumber: res.data.yearGrossProfit,
            decimals: 2,
            icon: 'income',
            unit: '元',
          },
        ]
      }),
    )
  })

  const initializeApp = async (...promises: Promise<void>[]) => {
    // loading方法封装成一个函数，参数为发送的请求
    loading.value = true
    try {
      await Promise.all(promises)
    } catch (e) {
      console.error(e)
    } finally {
      loading.value = false
    }
  }
</script>

<style lang="scss" scoped>
  .statistics-allCard {
    background-color: white;
    border: soild 1px #dcdfe6;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin-bottom: 16px;
    .heard-title {
      margin: 0px 14px 14px 26px;
      padding-top: 14px;
      font-weight: bold;
      display: flex;
      align-items: center;
      .icon {
        margin-right: 8px;
      }
    }
    .main-cards {
      padding: 10px 20px;
      .statistics-card {
        display: flex;
        background-color: white;
        border: soild 1px #dcdfe6;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
        height: 140px;
        margin-bottom: 16px;
        border-radius: 8px;
        padding: 12px;
        .statistics-icon {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          margin-right: 12px;
          .icons {
            height: 24px;
            width: 24px;
          }
        }
        .statistics-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .statistics-item {
            font-size: 16px;
            font-weight: 600;
            color: rgba(115, 127, 145, 0.7);
            .item-span {
              font-size: 14px;
              font-weight: 600;
            }
          }
          .statistics-number {
            font-size: 26px;
            font-weight: 500;
            .number-span {
              margin-left: 10px;
              font-size: 20px;
              font-weight: 500;
            }
          }
        }
      }
      .statistics-card:hover {
        box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
      }
    }
  }
</style>
